<#assign title="个人中心", person="layui-this">
<#include "header.ftl">
    <style>
    /*------公共样式开始------*/
    .layui-inline .layui-form-label {
        width: auto;
    }
    /*------公共样式结束------*/
    /*小屏幕设备*/
    @media (max-width: 767px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }

    /*中大型屏幕设备*/
    @media (min-width: 768px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }

</style>

    <div class="layui-body my-body">
        <div class="layui-card">
            <div class="layui-card-header">用户列表</div>
            <div class="layui-card-body">
                <form class="layui-form" lay-filter="person">
                    <div class="layui-form-item">
                        <label class="layui-form-label">头像</label>
                        <div class="layui-input-block">
                            <img class="layui-circle layui-anim" src="/images/logo.png"
                                 alt="logo" width="50" id="uploadLogo">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">您的ID</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" class="layui-input" value="" disabled/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="username" class="layui-input" value=""/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" class="layui-input" autocomplete = "off"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto">确认密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="checkPassword" class="layui-input" autocomplete = "off"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto">真实姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="realName" class="layui-input" value=""/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="SEX_MAN" title="男" >
                            <input type="radio" name="sex" value="SEX_WOMAN" title="女" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary" lay-submit lay-filter="users-reset">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
        layui.use(['form'], function () {
            var form = layui.form
                , $ = layui.$

            form.on('submit(users-reset)', function (data) {
                $.get('/user/get/me', function (data) {
                    if (data.success) {
                        $('#uploadLogo').attr('src', data.payload.avatarPath)
                        if (data.payload.avatarPath == null) {
                            $('#uploadLogo').attr('src', '/images/logo.png')
                        }
                        form.val('person', {
                            "username": data.payload.username,
                            "id": data.payload.id,
                            "realName": data.payload.realName,
                            "sex": data.payload.sex === '男' ? "SEX_MAN" : "SEX_WOMAN"
                        })
                    }
                })
            })

            $.get('/user/get/me', function (data) {
                if (data.success) {
                    $('#uploadLogo').attr('src', data.payload.avatarPath)
                    if (data.payload.avatarPath == null) {
                        $('#uploadLogo').attr('src', '/images/logo.png')
                    }
                    form.val('person', {
                        "username": data.payload.username,
                        "id": data.payload.id,
                        "realName": data.payload.realName,
                        "sex": data.payload.sex === '男' ? "SEX_MAN" : "SEX_WOMAN"
                    })
                }
            })

            $('#uploadLogo').click(function () {
                layer.open({
                    type: 2,
                    title: '裁切头像',
                    content: '/test',
                    area: ['90%', '90%'],
                    success: function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        var w = $(layero).find("iframe")[0].contentWindow;
                        w.myCropper({aspectRatio: 1}, null, $('#uploadLogo'))
                        let find = body.find("#check");
                        $(find).on('click', function () {
                            layer.confirm('确定修改吗?', {icon: 3, title:'确定修改头像'}, function(index){
                                layer.load()
                                let message = new FormData();
                                let id = $('input[name="id"]').val()
                                let file = dataURLToFile($('#uploadLogo')[0].src, new Date().getTime());
                                message.append("id", id);
                                message.append("file", file);

                                $.ajax({
                                    url: '/user/logo',
                                    type: 'post',
                                    contentType: false,
                                    processData: false,
                                    dataType: "json",
                                    data: message,
                                    success: function (data) {
                                        layer.close(layer.index)
                                        if (data.success) {
                                            layer.closeAll()
                                            layer.msg("修改成功！");
                                        } else {
                                            layer.msg("修改失败！请重试！");
                                        }
                                    },
                                    error: function (data) {
                                        layer.msg("添加失败！请重试！");
                                    }
                                })
                            });
                        })
                    }
                })
            })

            form.render();
            //监听提交
            form.on('submit(formDemo)', function(data){
                if (data.field.password !== undefined) {
                    if (data.field.password !== data.field.checkPassword) {
                        layer.msg('俩次密码不一致！');
                        $('input[name="checkPassword"]').focus()
                        return ;
                    }
                }
                layer.load()

                $.post('/user/update', data.field, function (data) {
                    layer.close(layer.index)
                    if (data.success) {
                        layer.msg('更新成功！');
                        $('input[name=username]').val(data.payload.username)
                        $('input[name=realName]').val(data.payload.realName)
                        if (data.payload.sex === '男') {
                            $('input[name="sex"][value="SEX_MAN"]').attr('checked', true)
                            $('input[name="sex"][value="SEX_WOMAN"]').attr('checked', false)
                        } else {
                            $('input[name="sex"][value="SEX_MAN"]').attr('checked', false)
                            $('input[name="sex"][value="SEX_WOMAN"]').attr('checked', true)
                        }
                    } else {
                        layer.msg(data.msg)
                    }
                })
                return false;
            });

            form.verify({
                username: function(value, item){ //value：表单的值、item：表单的DOM对象
                    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                        return '用户名不能有特殊字符';
                    }
                    if(/(^\_)|(\__)|(\_+$)/.test(value)){
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                }
            });

            //将base64转换为blob
            function dataURLToFile(dataUrl, fileName) {
                let arr = dataUrl.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], fileName, {type: mime});
            }
        })
    </script>
<#include "footer.ftl">